<template>
	<view class="info">
		<view class="back">
			<view class="goback" @click="gobackHandle"><view class="iconfont icon-arrow-left-bold"></view></view>
		</view>
		<view class="user_content" v-for="(user, index) in userInfo.data">
			<view class="user_content_header">
				<custom-avatar :item="{type:'large', image:user.image}"></custom-avatar>
				<view class="handle">
					<custom-follow-button :item="user"></custom-follow-button>
				</view>
			</view>
			<view class="user_content_aside">
				<view class="text">{{user.nickName}}</view>
				<view class="desc">{{user.desc}}</view>
			</view>
		</view>
		<custom-tabs :tabs="tabs" :currentTab="tabIndex"></custom-tabs>
		<custom-news-list v-show="tabIndex === 0" :item="tabs.data[tabIndex]"></custom-news-list>
		<custom-gotop v-show="isShowGoTop"></custom-gotop>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				isShowGoTop:false,
				userId:'',
				loading:false,
				userInfo:{
					data:[]
				},
				tabs:{
					fixed:false,
					data:[{
						title: '点赞',
						baseStoreName: 'getGoodData',
						storeName: 'getMoreGoodData',
						pn: 0,
						loading: false,
						loaded: false,
						data: []
					},]
				},
				tabIndex:0
			}
		},
		onLoad(ops) {
			this.userId = ops.id
			this.getPageData()
		},
		onPullDownRefresh() {
			this.getPageData().finally(() =>{
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			let that = this;
			if (!that.tabs.data[that.tabIndex].loading){
				that.tabs.data[that.tabIndex].loading = true;
				this.getGoodData(that.tabs.data[that.tabIndex].pn+1).finally(() => {
					that.tabs.data[that.tabIndex].loading = false;
					that.tabs.data[that.tabIndex].pn+=1;
				})
			}
		},onPageScroll(v) {
				if (v.scrollTop >= 200) {
					this.isShowGoTop = true;
				} else {
					this.isShowGoTop = false;
				}
			},
		methods:{
			gobackHandle(){
				uni.navigateBack({
					delta:1
				})
			},
			getPageData(){
				let that = this;
				return new Promise((resolve, reject) =>{
					Promise.all([that.getUserInfoData(), that.getGoodData()]).then(res=> {
						resolve()
					}).catch(err => {
						reject()
					})
				});
			},
			getUserInfoData(){
				let that = this;
				return new Promise((resolve, reject) =>{
					that.$store.dispatch("getUserInfoData", {
						userId: that.userId
					}).then(res => {
						that.userInfo.data = res.data
						resolve()
					}).catch(err => {
						console.log(err)
						reject(err)
					})
				})
			},
			getGoodData(pn){
				let that = this;
				return new Promise((resolve, reject) =>{
					that.$store.dispatch("getGoodData", {
						userId: that.userId,
						pn: pn || 0
					}).then(res => {
						that.tabs.data[0].data = pn>0 ? that.tabs.data[0].data.concat(res.data) : res.data
						console.log(that.tabs.data[0].data)
						resolve()
					}).catch(err => {
						console.log(err)
						reject(err)
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.info{
		.back{
			background-color: #4CD964;
			height:260rpx;
			position:relative;
			.goback{
				position:absolute;
				top:86rpx;
				left: 20rpx;
				height:60rpx;
				width:60rpx;
				background-color: rgba(255,255,255,.6);
				border-radius: 50%;
				display: flex;
				align-items: center;
				align-content: center;
				justify-content: center;
				font-weight: 700;
			}
		}
		.user_content{
			position:relative;
			padding:10rpx 20rpx;
			border-top-left-radius: 10rpx;
			border-top-right-radius: 10rpx;
			background-color: #FFFFFF;
			margin:-20rpx 0 0;
			.user_content_header{
				padding:60rpx 0 0;
				display:flex;
				custom-avatar{
					position: absolute;
					top:-60rpx;
					left:30rpx;
				}
				.handle{
					position:absolute;
					top:20rpx;
					right:30rpx;
					.iconfont{
						font-size: 42rpx;
						display:flex;
						align-items: center;
					}
				}
			}
			.user_content_aside{
				.text{
					font-size: 36rpx;
					padding:20rpx 0;
				}
				.desc{
					font-size:28rpx;
					color:#999999;
				}
			}
		}
		custom-tabs{
			position:initial;
			box-shadow: 0rpx;
		}
	}
</style>
